<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script>
    window.onload=function(){
        // 获取body节点
        var body=document.body;
        console.log(body,'获取body节点');
        // 查看节点类型 9Document 1Element 3Text 8Comment
        console.log(document.nodeType,'查看文档节点类型');
        console.log(body.nodeType,'查看元素节点类型');
        // 返回纯大写节点名称
        console.log(body.nodeName,'返回纯大写节点名称');
        var div=document.getElementById('one');
        console.log(div.nodeName,'返回纯大写节点名称');
        // 获取子节点 childNodes保存的是nodelist列表
        console.log(body.childNodes,'获取子节点');
        var childs=body.childNodes;
        console.log(Array.isArray(childs),'不是数组对象');
        // es5 将类数组对象转换为数组对象
        var result1=Array.prototype.slice.call(childs,0);
        console.log(Array.isArray(result1),'将类数组对象转换为数组对象');
        // es6 将类数组转换为数组对象
        var result=Array.from(childs);
        console.log(Array.isArray(result),'将类数组对象转换为数组对象');
        // 获取兄弟节点的前一个节点
        console.log(childs[1].previousSibling,'获取兄弟节点的前一个节点');
        // 获取兄弟节点的后一个节点
        console.log(childs[1].nextSibling,'获取兄弟节点的后一个节点');
        // 获取nodelist列表的第一个节点
        console.log(body.firstChild,'获取nodelist列表的第一个节点');
        // 获取nodelist列表最后一个节点
        console.log(body.lastChild,'获取nodelist列表最后一个节点');
        // 指向整个文档的文档节点
        console.log(body.ownerDocument,'指向表示整个文档的文档节点');
        // 查看是否有孩子节点
        console.log(body.hasChildNodes(),'是否有孩子节点');
        // 获取元素孩子节点
        console.log(body.children,'获取元素孩子节点');
        // 过滤出所有元素孩子节点
        var result=Array.from(childs);
        var result2=result.filter(function(item){
            return item.nodeType == 1
        });
        console.log(result2,'过滤出元素节点');
    }
</script>
<body>
    hello
    <div id="one" class="two">我是块级元素div</div>
    world
    <div class="three" id="four"></div>
    <!-- 注释节点 -->
</body>
</html>